<script setup lang="ts">
import { ref } from 'vue'

import type { FormInstance } from 'element-plus'

interface IProps {
  tableData: []
  loading: boolean
  total: number
  formModel: object
}

defineProps<IProps>()

const page = defineModel<number>('page')
const pageSize = defineModel<number>('pageSize')

interface IEmits {
  (e: 'fetchData'): void
  (e: 'search'): void
  (e: 'reset'): void
}

const emits = defineEmits<IEmits>()

const ruleFormRef = ref<FormInstance>()
defineExpose({
  ruleFormRef
})
</script>

<template>
  <div class="page-wrapper">
    <!-- 搜索头 -->
    <header class="filter-header">
      <el-form :model="formModel" class="filter-form" ref="ruleFormRef">
        <slot name="header"></slot>
        <div>
          <el-button :loading="loading" type="primary" @click="() => emits('search')"
            >查询/刷新</el-button
          >
          <el-button @click="emits('reset')" :loading="loading">重置</el-button>
        </div>
      </el-form>
    </header>
    <!-- 动态操作位 -->
    <section class="action-line">
      <slot name="action"></slot>
    </section>
    <!-- 表单主体 -->
    <main class="mian-container">
      <el-table :data="tableData" class="custom-table" v-loading="loading">
        <slot name="bodyColumn"></slot>
      </el-table>
    </main>
    <!-- 分页 -->
    <footer class="page-footer">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="() => emits('fetchData')"
      >
      </el-pagination>
    </footer>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.page-wrapper {
  height: fit-content;
  padding: 20px;
  box-sizing: border-box;
  .filter-header {
    border-bottom: 1px solid #e5e6eb;
    padding-bottom: 20px;
    .filter-form {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }
  }
  .action-line {
    padding: 10px 0;
  }

  .mian-container {
    .custom-table {
      --el-table-text-color: #1d2129 !important;
      --el-table-header-bg-color: #f2f3f5;
      --el-table-header-text-color: #1d2129;
    }
  }
  .page-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
